<!-- <template>
  <div>
    <h2>欢迎来到盒马</h2>
    <p>查看我们的最新产品：</p>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }} - ￥{{ product.price }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '山东红富士苹果 2.5kg装', price: 29.9 },
        { id: 2, name: '赣南脐橙 2.5kg装', price: 19.9 }
      ]
    }
  }
}
</script>
 -->

<!--  <template>
  <div>
    <div v-for="product in products" :key="product.id">
      <p>{{ product.name }} - ${{ product.price }}</p>
      <button @click="addToCart(product)">添加到购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '山东红富士苹果 2.5kg装', price: 29.9 },
        { id: 2, name: '赣南脐橙 2.5kg装', price: 19.9 }
      ]
    };
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product);
    }
  }
}
</script>  -->



<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索关键词"></el-input>

    <h2>推荐商品</h2>
    <div class="product-list">
      <div v-for="product in products" :key="product.id" class="product-item">
        <img :src="product.image" alt="product image" :style="{ width: '200px', height: '200px' }">
        <p>{{ product.name }}</p>
        <p>价格：{{ product.price }}</p>
        <el-button @click="addToCart(product)">添加到购物车</el-button>
      </div>
    </div>

    <router-link to="/cart">前往购物车</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      products: [
        { id: 1, name: '山东红富士苹果 2.5kg装', price: 29.9, image: require('@/assets/product1.jpg') },
        { id: 2, name: '赣南脐橙 2.5kg装', price: 19.9, image: require('@/assets/product2.jpg') },
        { id: 3, name: '商品3', price: 30, },
        // 添加更多商品...
      ]
    };
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('addToCart', product);
      console.log('添加商品到购物车', product);
    }
  }
}
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: calc(33.33% - 20px); /* 一行放三个商品，减去间距 */
  margin-right: 20px; /* 设置商品项之间的间距 */
  margin-bottom: 20px;
}
</style>